<template>
  <div class="create_open_map_box">
    <div class="inner_content_box">
      <div class="single_1_box_common">
        <div class="com_title_c"><img class="com_title_img" src="../../../assets/img/openlayer/1.png">坐标系定义</div>
        <div class="un_coding_c">（1）坐标系详情：<a href="https://epsg.io/">https://epsg.io/</a></div>
        <div class="un_coding_c">（2）以CGCS2000为例</div>
        <div class="coding_1_box_common coding_row_1">
          <pre><code class="language-javascript"
                     v-text="content"></code></pre>
        </div>
      </div>

      <div class="single_1_box_common">
        <div class="com_title_c"><img class="com_title_img" src="../../../assets/img/openlayer/1.png">展示</div>
        <div class="map_content_box"  id="map_content_1"></div>
        <div class="coding_1_box_common coding_row_1">
          <pre><code class="language-javascript"
                     v-text="content1"></code></pre>
        </div>
      </div>

    </div>

  </div>
</template>

<script lang="ts" setup>
import Prism from 'prismjs';
import {nextTick, onMounted, ref} from "vue";

import 'ol/ol.css'
import { Map, View} from 'ol'
import {register} from 'ol/proj/proj4'
import {WebGLTile} from 'ol/layer'
import { Style} from 'ol/style'
import {ImageTile,XYZ} from 'ol/source'
import proj4 from 'proj4'

const content = `proj4.defs('EPSG:4490', 'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]')`

const content1=`
import 'ol/ol.css'
import { Map, View} from 'ol'
import {register} from 'ol/proj/proj4'
import {WebGLTile} from 'ol/layer'
import { Style} from 'ol/style'
import {ImageTile,XYZ} from 'ol/source'
import proj4 from 'proj4'

const cViewer = ref();
const content = \`proj4.defs('EPSG:4490', 'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]')\`

const createMap = () => {
  proj4.defs('EPSG:4490', 'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]')
  register(proj4)
  let  layer= new WebGLTile({
    source: new ImageTile({
      attributions:
          'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
          'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
      url:
          'https://server.arcgisonline.com/ArcGIS/rest/services/' +
          'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
    }),
  })

  let map = new Map({
    target: 'map_content_1',
    layers: [layer],
    view: new View({
      center: [116.391478, 39.903185],
      projection: 'EPSG:4490',
      zoom: 5,
      maxZoom: 20,
      minZoom: 1
    }),
    overlays: [],
  })
  map.on('click', function (e) {

  })
  map.on('singleclick', function (e) {

  })`
const createMap = () => {
  proj4.defs('EPSG:4490', 'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]')
  register(proj4)
  let  layer= new WebGLTile({
    source: new ImageTile({
      attributions:
          'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
          'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
      url:
          'https://server.arcgisonline.com/ArcGIS/rest/services/' +
          'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
    }),
  })

  let map = new Map({
    target: 'map_content_1',
    layers: [layer],
    view: new View({
      center: [116.391478, 39.903185],
      projection: 'EPSG:4490',
      zoom: 5,
      maxZoom: 20,
      minZoom: 1
    }),
    overlays: [],
  })
  map.on('click', function (e) {

  })
  map.on('singleclick', function (e) {

  })
}

onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
    createMap();
  })

})
</script>

<style lang="scss" scoped>
/* 引入Prism.js的CSS主题 */
@import 'prismjs/themes/prism-tomorrow.css';
@import '../css/openlayer_common.css';

.create_open_map_box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
  background-color: rgba(44, 62, 80, 0.5);

  .inner_content_box {
    width: calc(100% - 300px - 100px - 500px);
    height: calc(100% - 20px);
    margin-top: 10px;
    margin-right: 350px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.8);

  }

}
</style>
